<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>华为收银台</title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/new.css" />
		<link rel="stylesheet" href="css/zxy/headAndFoot.css" />
		<script type="text/javascript" src="js/jQuerynew.js"></script>
		<script type="text/javascript" src="js/bootstrapnew.min.js"></script>
		<script src="lib/vue.js"></script>
		<style type="text/css">
			.container {
				width: 100%;
			}

			.conall {
				margin-right: auto;
				margin-left: auto;
			}

			.warp {
				width: 1200px;
				margin: 0 auto;
			}

			.logo_name {
				width: 100%;
				height: 65px;
				margin-top: 40px;
			}

			.huawei_logo {
				display: inline-block;
				width: 188px;
				height: 28px;
				margin-top: -10px;
			}

			img {

				height: auto;
				max-width: 100%;
				vertical-align: middle;
				border: 0;
				-ms-interpolation-mode: bicubic;
			}

			.logo_name span {
				line-height: 20px;
				margin-left: 13px;
				padding: 0 13px;
				border-left: 1px solid #e8e8e8;
				color: #343434;
				letter-spacing: 1px;
				font-size: 16px;
			}

			.cashier_order_area {
				width: 100%;
				border-top: 3px solid #63AA56;
			}

			.cashier_orderInfo {
				width: 100%;
				background: #EFFAED;
			}

			.orderInfo_img {
				width: 120px;
			}

			.pull-left {
				float: left;
			}

			.orderInfo_img img {
				width: 64px;
				height: 64px;
				margin: 30px 21px 0 34px;
			}

			.orderInfo_words {
				width: 1058px;
				padding: 28px 22px 20px 0;
			}

			.orderInfo_words_01,
			.orderDetails {
				position: relative;
				width: 100%;
			}

			.orderWords01 {
				line-height: 26px;
			}

			.orderWords01 h4 {
				float: left;
				font-size: 18px;
				line-height: 26px;
				color: #53A724;
			}

			.orderNum {
				color: #DA3232;
				margin-left: 15px;
			}

			.orderNum span:first-of-type {
				color: #333333;
				font-weight: 600;
			}

			.payNum span:first-of-type,
			.payTitle {
				color: #000000;
				line-height: 20px;
				margin-top: 6px;
			}

			.pull-right {
				float: right;
			}

			.payNumAll {
				font-size: 24px;
				color: #DA3232;
				margin-right: 6px;
				font-weight: 600;
			}

			.orderInfo_words_01 h5 {
				font-size: 12px;
				line-height: 20px;
				margin-top: 20px;
				color: #333333;
			}

			.orderInfo_words_01 h5 em {
				font-style: normal;
				color: #DA3232;
				font-weight: 600;
			}

			.orderInfo_show {
				width: auto;
				min-width: 62px;
				line-height: 20px;
				cursor: pointer;
				text-align: left;
				font-size: 12px;
				color: #333333;
			}

			.orderInfo_show span {
				margin-right: 12px;
			}

			.rderInfo_show img {
				position: absolute;
				right: 0;
				width: 8px;
				height: 6px;
				margin-top: 7px;
				margin-left: 6px;
			}

			.inventory-warning {
				display: none;
				margin-top: 5px;
				color: #DA3232;
			}

			.orderDetails_words ul {
				margin-top: 20px;
			}

			.orderDetails_words ul:first-child {
				margin-top: 10px;
			}

			.orderDetails_words ul li {
				line-height: 20px;
				font-size: 12px;
				color: #333333;
			}

			.orderDetails_words ul li span {
				margin-right: 30px;
			}

			.orderDetails_words ul li span:first-child {
				margin-right: 0;
			}

			.tab-content {
				position: relative;
				border: 1px solid #CCCCCC;
				border-top: none;
				padding: 37px 50px 37px 60px;
				overflow: inherit;
			}

			#myTab {
				position: relative;
				margin-top: 46px;
				margin-bottom: 0;
				z-index: 9;
			}

			.nav-tabs {
				border-bottom: 1px solid #ddd;
			}

			.nav-tabs,
			.nav-pills {}

			.nav {
				margin-bottom: 20px;
				margin-left: 0;
				list-style: none;
			}

			.nav-tabs>li:first-child>a {
				border-left-color: #CCCCCC;
			}

			.nav-tabs>li>a {
				width: 168px;
				padding: 10px 0;
				text-align: center;
				margin-right: 0;
				border-radius: 0;
				border: 1px solid #CCCCCC;
				border-left-color: transparent;
				font-size: 14px;
				color: #000000;
				background: #F2F2F2;
			}

			.nav-tabs>.active>a,
			.nav-tabs>.active>a:hover,
			.nav-tabs>.active>a:focus {
				background: #FFFFFF;
				border: 1px solid #CCCCCC;
				border-bottom-color: transparent;
				border-left-color: transparent;
			}

			.tab-pane>li {
				position: relative;
				display: inline-table;
				width: 268px;
				vertical-align: top;
				padding-bottom: 16px;
			}

			.tab-pane>li>.act-line {
				position: relative;
				width: 97%;
				height: 24px;
				margin-top: 0;
				font-size: 12px;
				color: #4A4A4A;
				letter-spacing: 0px;
			}

			.tab-pane>li>.act-line>i {
				display: inline-block;
				line-height: 24px;
				min-width: 26px;
				padding: 0 7px;
				text-align: center;
				color: #ffffff;
			}

			i.recomType {
				background: #DA3232;
			}

			i,
			em {
				font-style: normal;
			}

			.pay_typeIco {
				position: relative;
				width: 256px;
				line-height: 50px;
				text-align: center;
				border: 1px solid #CCCCCC;
				cursor: pointer;
			}

			.pay_typeIco img {
				width: auto;
				height: 30px;
				margin: 5px 0;
			}

			.tab-pane>li>.payTool-descr {
				display: none;
			}

			.payBtn {
				width: 100%;
				margin-top: 16px;
				margin-bottom: 56px;
			}

			.payBtn li {
				height: 40px;
			}

			element.style {
				background: #DA3232;
				color: #ffffff;
			}

			.payBtn li button.confirmPay {
				display: inline-block;
				width: 168px;
				line-height: 40px;
				float: right;
				padding: 0;
				font-size: 18px;
				text-align: center;
				border: none;
				cursor: pointer;
				background: #DA3232;
				color: #ffffff;
			}

			.disabled-btn-info {
				display: none;
				width: 100%;
				line-height: 18px;
				margin-top: 6px;
				font-size: 12px;
				color: #DA3232;
				text-align: right;
			}
			
			#confirPay{
				padding: 20px 0;
				margin-bottom: 20px;
				height: 80px;
			}
			
			#confirPay button{
				    display: inline-block;
						width: 168px;
						line-height: 40px;
						float: right;
						padding: 0;
						font-size: 18px;
						text-align: center;
						border: none;
						cursor: pointer;
						background: #DA3232;
						color: #ffffff;
			}
			
			#foot {
				width: 100%;
				background: #e6e6e6;
				z-index: 800;
				height: 98px;
				padding-left: 70px;
			}
			
		</style>
	</head>
	<body>
		<div id="all">
			<div class="warp warp-content clearfix" style="min-height: 515px;">
				<div class="logo_name clearfix">
					<a class="huawei_logo" href="https://www.vmall.com"><img class="logoImg" logoName="logoSrc" logoattr="flag" src="img/gzh/201706301129294766528.png"
						 alt="huawei" /></a>
					<span class="i18n" name="msg_Checkout">收银台</span>
				</div>
				<div class="cashier_order_area clearfix" id="cashierHome">
					<div class="cashier_orderInfo clearfix">
						<div class="orderInfo_img pull-left">
							<img src="img/gzh/success_icon.png" />
						</div>
						<div class="orderInfo_words pull-left">
							<div class="orderInfo_words_01 clearfix">
								<div class="orderWords01 clearfix">
									<h4 class="i18n pull-left" name="msg_prompt">订单提交成功，只差付款了~</h4>
									<div class="orderNum pull-left">
										<span class="i18n" name="msg_orderNo">订单号：</span>
										<span style="color: #da3232;">{{orderid}}</span>
									</div>
									<div class="payNum pull-right">
										<span class="pull-right"></span>
										<span class="payNumAll pull-right">{{payPrice}}</span>
										<span class="payTitle pull-right">订单金额：</span>
									</div>
								</div>
								<h5 class="clearfix"><span class="i18n pleasePay" name="msg_ple">请您在</span><em class="dateDiff">
										<span id="day" style="display: none;"></span><span class="i18n" name="day" style="display: none;">天</span><span
										 id="hour" style="display: none;"></span><span class="i18n" name="hour" style="display: none;">小时</span><span
										 id="minite" style="display: inline-block;">10</span><span class="i18n" name="minite" style="display: inline-block;">分</span><span
										 id="second" style="display: inline-block;">25</span><span class="i18n" name="second" style="display: inline-block;">秒</span>
									</em><span class="i18n orderWarn" name="msg_order_warn">内完成支付，否则本次支付将自动取消。</span>
									<div class="orderInfo_show pull-right">
										<span class="i18n pull-right" name="msg_orderInf">订单详情</span>
										<img src="https://res.vmallres.com/ips/pc/20180901/img/down arrow_icon.png?20180901">
									</div>
								</h5>
								<p class="i18n inventory-warning clearfix" name="msg_warningPay" style="display: block;">订单含付款减库存商品，支付完成才会为您预留库存！</p>


							</div>
							<div class="orderDetails clearfix">
								<div class="orderDetails_words">
									<ul>
										<li show=""><span class="i18n" name="msg_sendNomber">订单编号：</span>
											<span style="color: #da3232;">{{orderid}}</span>
										</li>
										<li show=""><span class="i18n" name="msg_takeInf">收货信息：</span><span>{{address.consignee}}</span><span>{{address.tel}}</span><span>{{address.province}} {{address.city}} {{address.district}} {{address.street}} {{address.address}}</span>
										</li>

										<li show=""><span class="i18n" name="msg_goodsName">商品名称：</span><span v-for="goods in goodsList">{{goods}}</span></li>

										<li show=""><span class="i18n" name="msg_billInf">发票信息：</span><span>电子普通发票</span><span>个人</span>
										</li>

										<li show=""><span class="i18n" name="msg_buyTime">购买时间：</span><span>{{orderTime}}</span></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<ul class="nav nav-tabs" id="myTab">
						<li class="COMMON active" name="common_pay" sort="0">
							<a href="#common_pay" class="i18n" name="msg_common_pay" data-toggle="tab">常用</a>
						</li>
						<li class="THIP" name="third_pay" sort="1">
							<a href="#third_pay" class="i18n" name="msg_third_pay" data-toggle="tab">平台支付</a>
						</li>
						<li class="INST" name="hb_pay" sort="2">
							<a href="#hb_pay" class="i18n" name="msg_hb_pay" data-toggle="tab">分期支付</a>
						</li>
						<li class="NETB" name="nwchain_pay" sort="3">
							<a href="#nwchain_pay" class="i18n" name="msg_nwchain_pay" data-toggle="tab">网银支付</a>
						</li>
					</ul>
					<div id="myTabContent" class="tab-content">
						<ul class="tab-pane fade in active" id="common_pay">
							<li class="select">
								<div class="act-line">
									<i class="recomType">推荐</i>
								</div>
								<div class="pay_typeIco tooltip-test clearfix">
									<img src="img/gzh/ALIPAY.png" alt="支付宝">
									<i></i>
								</div>
								<div class="payTool-descr clearfix" style="margin-top: 0px;"></div>
							</li>
							<li>
								<div class="act-line">
								</div>
								<div class="pay_typeIco tooltip-test clearfix">
									<img src="img/gzh/WXPAY.png" alt="微信支付">
									<i></i>
								</div>
								<div class="payTool-descr clearfix" style="margin-top: 0px;"></div>
							</li>
							<li>
								<div class="act-line">
									<i class="recomType">NEW</i>
									<span style="color: #DA3232;">需安装掌上生活客户端</span>
								</div>
								<div class="pay_typeIco tooltip-test clearfix">
									<img src="img/gzh/CMBLIFE.png" alt="掌上生活">
									<i></i>
								</div>
								<div class="payTool-descr clearfix" style="margin-top: 0px;"></div>
							</li>
							<li>
								<div class="act-line">
									<i class="recomType">NEW</i>
								</div>
								<div class="pay_typeIco tooltip-test clearfix">
									<img src="img/gzh/HUAWEIPAY.png" alt="银联云闪付(Huawei Pay)">
									<i></i>
								</div>
								<div class="payTool-descr clearfix" style="margin-top: 0px;"></div>
							</li>
							<li>
								<div class="act-line">
								</div>
								<div class="pay_typeIco tooltip-test clearfix">
									<img src="img/gzh/HUABEI.png" alt="花呗分期">
									<i></i>
								</div>
								<div class="payTool-descr clearfix" style="margin-top: 0px;"></div>
							</li>

						</ul>
						<ul class="tab-pane fade" id="third_pay">
							<li class="select">
								<div class="act-line">
									<i class="recomType">推荐</i>
								</div>
								<div class="pay_typeIco tooltip-test clearfix">
									<img src="img/gzh/ALIPAY.png" alt="支付宝">
									<i></i>
								</div>
								<div class="payTool-descr clearfix" style="margin-top: 0px;"></div>
							</li>
							<li>
								<div class="act-line">
								</div>
								<div class="pay_typeIco tooltip-test clearfix">
									<img src="img/gzh/WXPAY.png" alt="微信支付">
									<i></i>
								</div>
								<div class="payTool-descr clearfix" style="margin-top: 0px;"></div>
							</li>
							<li>
								<div class="act-line">
									<i class="recomType">NEW</i>
								</div>
								<div class="pay_typeIco tooltip-test clearfix">
									<img src="img/gzh/HUAWEIPAY.png" alt="银联云闪付(Huawei Pay)">
									<i></i>
								</div>
								<div class="payTool-descr clearfix" style="margin-top: 0px;"></div>
							</li>
							<li>
								<div class="act-line">
								</div>
								<div class="pay_typeIco tooltip-test clearfix">
									<img src="img/gzh/UNIONPAY.png" alt="银联在线支付">
									<i></i>
								</div>
								<div class="payTool-descr clearfix" style="margin-top: 0px;"></div>
							</li>
						</ul>
						<ul class="tab-pane fade" id="hb_pay">
							<li>
								<div class="act-line">
								</div>
								<div class="pay_typeIco tooltip-test clearfix">
									<img src="img/gzh/HUABEI.png" alt="花呗分期">
									<i></i>
								</div>
								<div class="payTool-descr clearfix" style="margin-top: 0px;"></div>
							</li>
							<li>
								<div class="act-line">
									<i class="recomType">NEW</i>
									<span style="color: #DA3232;">需安装掌上生活客户端</span>
								</div>
								<div class="pay_typeIco tooltip-test clearfix">
									<img src="img/gzh/CMBLIFE.png" alt="掌上生活">
									<i></i>
								</div>
								<div class="payTool-descr clearfix" style="margin-top: 0px;"></div>
							</li>
						</ul>
						<ul class="tab-pane fade" id="nwchain_pay">
							<li>
								<div class="act-line">
								</div>
								<div class="pay_typeIco tooltip-test clearfix">
									<img src="img/gzh/CMB.png" alt="招商银行">
									<i></i>
								</div>
								<div class="payTool-descr clearfix" style="margin-top: 0px;"></div>
							</li>
							<li>
								<div class="act-line">
								</div>
								<div class="pay_typeIco tooltip-test clearfix">
									<img src="img/gzh/ICBC.png" alt="中国工商银行">
									<i></i>
								</div>
								<div class="payTool-descr clearfix" style="margin-top: 0px;"></div>
							</li>
							<li>
								<div class="act-line">
								</div>
								<div class="pay_typeIco tooltip-test clearfix">
									<img src="img/gzh/CCB.png" alt="中国建设银行">
									<i></i>
								</div>
								<div class="payTool-descr clearfix" style="margin-top: 0px;"></div>
							</li>
							<li>
								<div class="act-line">
								</div>
								<div class="pay_typeIco tooltip-test clearfix">
									<img src="img/gzh/BCM.png" alt="交通银行">
									<i></i>
								</div>
								<div class="payTool-descr clearfix" style="margin-top: 0px;"></div>
							</li>
							<li>
								<div class="act-line">
								</div>
								<div class="pay_typeIco tooltip-test clearfix">
									<img src="img/gzh/ABC.png" alt="中国农业银行">
									<i></i>
								</div>
								<div class="payTool-descr clearfix" style="margin-top: 0px;"></div>
							</li>
						</ul>
					</div>

				</div>
			<div id="confirPay"><button>确认支付</button></div>
				<ul class="payBtn clearfix">
					<li>
						<button class="i18n confirmPay pull-right" name="msg_payBtn" onclick="pay(this)" style="background:#DA3232;color:#ffffff">确认支付</button>
						<div id="cashCoupon">

						</div>

					</li>
					<p class="i18n disabled-btn-info clearfix" name="msg_selAlert" style="display: none;">请在当前页面先选择支付方式</p>
				</ul>
			</div>
			<div id="foot">
				<div id="footBottom">
					<div id="copyright">
						<div id="copyrightLeft"><a href="#">
								<div></div>
							</a></div>
						<div id="copyrightMid">
							<p><a>隐私声明</a> <a>服务协议</a> Copyright © 2012-2018 华为软件技术有限公司 版权所有 保留一切权利</p>
							<p>公安备案 苏公网安备 32011402010009 号 | 苏 ICP 备 17040376 号 - 6 | 增值电信业务经营许可证：苏 B2-20130048 号 |</p>
						</div>
						<div id="copyrightLogo">
							<a href="#"><img src="img/zxy/headAndFoot/copyright1.jpg" width="70px" height="24px" /></a>
							<a href="#"><img src="img/zxy/headAndFoot/copyright2.png" width="70px" height="24px" /></a>
							<a href="#"><img src="img/zxy/headAndFoot/copyright3.png" width="70px" height="24px" /></a>
							<a href="#"><img src="img/zxy/headAndFoot/copyright4.png" width="70px" height="24px" /></a>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!--获取隐式对象  -->
		<span 
			data-iflogin="${ifLogin }" 
			data-ifempty="${ifEmpty }" 
			data-userid="${user.userid }" 
			data-usertel="${user.tel }" 
			id="getData" style="display:none">
		</span>
		
		<script>
			var addressStr='${requestScope.addressStr}';
			console.log("addressStr:"+addressStr);
			var address=$.parseJSON(addressStr);
			console.log("address:"+address);
			var orderid='${requestScope.orderid}';
			console.log("orderid:"+orderid);
			var payPrice='${requestScope.payPrice}';
			console.log("payPrice:"+payPrice);
			var goodsListStr='${requestScope.goodsListStr}';
			console.log("goodsListStr:"+goodsListStr);
			var goodsList=$.parseJSON(goodsListStr);
			console.log("goodsList:"+goodsList);
			var orderTime='${requestScope.orderTime}';
			console.log("orderTime:"+orderTime);
			
			
			var all=new Vue({
				el:"#all",
				data:{
					address:address,
					orderid:orderid,
					payPrice:payPrice,
					goodsList:goodsList,
					orderTime:orderTime,
				}
			});
		</script>
	</body>
</html>